/**
 * @description  访问统计
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { XYAxisChartsC, SecondHeaderC } from '../../../comps';
import style from './index.less';

class showEchartsOne extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }
  componentDidMount() {
    const { dispatch, args } = this.props;
    dispatch({
      type: 'visitStatisticsM/getEchartsOne',
      payload: args,
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { args, timeStamp } = nextProps;
    if (JSON.stringify(args) !== JSON.stringify(this.props.args) || timeStamp !== this.props.timeStamp) {
      const { dispatch } = this.props;
      dispatch({
        type: 'visitStatisticsM/save',
        payload: { getEchartsOne: { xAxis: [], serieslist: undefined } },
      });
      dispatch({
        type: 'visitStatisticsM/getEchartsOne',
        payload: args,
      });
    }
  }
  changeSeries1 = (series1) => {
    const arr = [];
    if (series1 && series1.length) {
      series1.map((item) => {
        if (item == null) {
          arr.push(item);
        } else {
          arr.push(Number((Number(item.substr(item.length - 2, item.length - 1)) / 60).toFixed(1)) + Number(item.substr(0, 2)));
        }
      });
    }
    return arr;
  };

  render() {
    const {
      visitStatisticsM: { getEchartsOne },
      args,
    } = this.props;
    const xAxis = getEchartsOne.xAxis;
    const series1 = getEchartsOne.serieslist;
    const series2 = series1 && series1.length && series1[0].data ? this.changeSeries1(series1[0].data) : null;
    const series = series1 && series1.length ? [{ name: series1[0].name, data: series2 }] : undefined;
    return (
      <div className={style.body_area}>
        <SecondHeaderC title={args.tenant ? '时间维度' : '最早登录时点趋势'} />
        <div className='showEcharts'>
          <XYAxisChartsC
            type='line'
            series={series}
            xAxis={xAxis}
            toolTipFormat={(params) => {
              let index = 0;
              params.map((item) => {
                index = item.dataIndex;
              });
              const data = series1[0].data;
              return params[0].value == undefined
                ? `<div style="font-size:14px">${params[0].name}</div>` + `<div style='font-size:14px;margin-top:3px';height:10px>无访问记录</div>`
                : `<div style="font-size:14px">${params[0].name}</div>` +
                    `<div style='font-size:14px;margin-top:3px';height:10px>${args.tenant ? '菜单点击次数：' : '登录时间：'}${data[index]}</div>`;
            }}
            dataZoom={true}
            yAxisUnit={[args.tenant ? '菜单点击次数' : '单位(h)']}
            height='310px'
          />
        </div>
      </div>
    );
  }
}
export default connect(({ visitStatisticsM }) => ({
  visitStatisticsM,
}))(showEchartsOne);
